﻿@page "/chart/local-data"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample shows the plotting of local data on the stock price analysis of two products over a period of time.</p>
</SampleDescription>
<ActionDescription>
    <p>The Chart supports data binding. The <code>DataSource</code> property can be assigned either as list of objects or with instance of <code>DataManager</code>.</p>
    <p>In this demo, the list of objects is assigned as the data source to the Chart. The Chart can be bound to IEnumerable, IQueryable and ObservableCollection type data sources.</p>
    <p>More information about the local data binding can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/chart/working-with-data'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfChart Title="Stock Price Analysis" Theme="@Theme">
        <ChartArea>
            <ChartAreaBorder Width="0"></ChartAreaBorder>
        </ChartArea>
        <ChartPrimaryXAxis Title="Years" Skeleton="y" ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" EdgeLabelPlacement="EdgeLabelPlacement.Shift">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis Title="Price" LabelFormat="${value}" RangePadding="ChartRangePadding.None">
            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
            <ChartAxisMinorTickLines Width="0"></ChartAxisMinorTickLines>
        </ChartPrimaryYAxis>
        <ChartSeriesCollection>
            <ChartSeries Type="ChartSeriesType.Line" DataSource="@ChartPointsX" XName="Period" YName="StockPrice" Width="2" Name="Product X">
            </ChartSeries>
            <ChartSeries Type="ChartSeriesType.Line" DataSource="@ChartPointsY" XName="Period" YName="StockPrice" Width="2" Name="Product Y">
            </ChartSeries>
        </ChartSeriesCollection>
        <ChartCrosshairSettings Enable="true" LineType="LineType.Vertical">
            <ChartCrosshairLine Color="rgba(204,214,235,0.25)" Width="20"></ChartCrosshairLine>
        </ChartCrosshairSettings>
        <ChartTooltipSettings Enable="true" Shared="true"></ChartTooltipSettings>
    </SfChart>
</div>


@code{

    private Random randomNum = new Random();
    private double stockPriceX = 80, stockPriceY = 90;
    private Theme Theme { get; set; }
    public List<LineChartData> ChartPointsX { get; set; } = new List<LineChartData>();
    public List<LineChartData> ChartPointsY { get; set; } = new List<LineChartData>();

    protected override void OnInitialized()
    {
        GetChartPoints();
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    private void GetChartPoints()
    {
        for (int i = 1; i < 500; i++)
        {
            if (randomNum.NextDouble() > 0.5)
            {
                stockPriceX += randomNum.NextDouble();
                stockPriceY += randomNum.NextDouble();
            }
            else
            {
                stockPriceX -= randomNum.NextDouble();
                stockPriceY -= randomNum.NextDouble();
            }
            ChartPointsX.Add(new LineChartData
            {
                Period = new DateTime(1960, 1, 1).AddMonths(i + 1).AddDays(i),
                StockPrice = Math.Round(stockPriceX)
            });
            ChartPointsY.Add(new LineChartData
            {
                Period = new DateTime(1960, 1, 1).AddMonths(i + 1).AddDays(i),
                StockPrice = Math.Round(stockPriceY)
            });
        }
    }

    public class LineChartData
    {
        public DateTime Period { get; set; }
        public double StockPrice { get; set; }
    }

}